<template>
  <div class="login_container">
    <div class="body_bgc"></div>
    <div class="postTitle">e起淘电商后台管理系统</div>
    <div class="login_box">
      <!-- 登录 -->
      <div class="login_btn" @click="login">
        <i class="el-icon-right"></i>
      </div>
      <!-- 表单 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="LoginFormRules"
        label-width="0"
        class="login_form"
      >
        <!-- 用户名 -->
        <el-form-item prop="username" ref="userRef">
          <el-input
            v-model="loginForm.username"
            prefix-icon="iconfont icon-user"
            :class="
              !isShowUserLine ? 'noborder-input exs' : 'noborder-input exp'
            "
            clearable
            @focus="userFocus"
            @blur="userBlur"
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password" ref="pwRef">
          <el-input
            v-model="loginForm.password"
            prefix-icon="iconfont icon-3702mima"
            type="password"
            :class="!isShowPwLine ? 'noborder-input exs' : 'noborder-input exp'"
            clearable
            @focus="pwFocus"
            @blur="pwBlur"
            @keydown.enter.native="login"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 表单
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      // 验证规则
      LoginFormRules: {
        username: [
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
          { required: true, message: '请输入登录名称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      },
      // 用户名输入框下方红条显隐
      isShowUserLine: false,
      // 密码输入框下方红条显隐
      isShowPwLine: false
    }
  },
  methods: {
    // 登录
    login () {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.$message.success('登录成功')
        // console.log(res)
        // 保存token
        window.sessionStorage.setItem('token', res.data.token)
        // 编制式导航跳转网页
        this.$router.push('/home')
      })
    },
    // 用户框聚焦时函数
    userFocus () {
      this.$refs.userRef.clearValidate()
      this.isShowUserLine = true
    },
    // 用户框失焦时函数
    userBlur () {
      this.isShowUserLine = false
    },
    // 密码框聚焦时函数
    pwFocus () {
      this.$refs.pwRef.clearValidate()
      this.isShowPwLine = true
    },
    // 密码框失焦时函数
    pwBlur () {
      this.isShowPwLine = false
    }
  }
}
</script>

<style lang="less">
.noborder-input /deep/ .el-input__inner {
  border: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0px;
  position: relative;
}
.noborder-input::after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  content: '';
  background: #f06292;
}
.exp::after {
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  width: 100%;
}
.exs::after {
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  width: 0;
}
</style>

<style lang="less" scoped>
.postTitle {
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  border: 0px;
  font-size: 300%;
  font-weight: bold;
  float: left;
  line-height: 1.5;
  padding-left: 5px;
  color: #fff;
}
.postTitle::after {
  background-color: #fff;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
}
@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100%, 0;
  }
}
.body_bgc {
  position: fixed;
  left: 0;
  top: 0;
  background-color: #f06292;
  width: 100vw;
  height: 50vh;
}
.el-form {
  width: 220px;
  margin: 0;
  padding: 0;
}
.el-input {
  border: none;
}
.login_container {
  width: 100vw;
  height: 100vh;
  background-color: #ececec;
  position: absolute;
  & .login_box {
    box-sizing: border-box;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27);
    border-radius: 2px;
    padding: 35px 55px 35px 25px;
    background-color: #fff;
    width: 300px;
    height: 170px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .login_btn {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(50%, -50%);
      border-radius: 100%;
      width: 50px;
      height: 50px;
      background-color: #ff4f0f;
      // z-index: 99999;
      ::after {
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99999999999;
      }
      i {
        color: #fff;
        width: 100%;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
      }
    }
  }
}
// 水波纹动画
@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}
</style>
